<template>
    <div class="store-icon-connect">
        <img :src="store.img" />
        <strong v-text="store.name"></strong>
        <span v-show="active_name" v-text="active_name" :title="active_name"></span>
    </div>
</template>
<script>
export default {
    name: "shopIconName",
    props: ['type', 'name', 'item'],
    data () {
        return {
        }
    },
    computed: {
        active_type: {
            get () {
                let type = 0;
                if (this.type) {
                    type = this.type;
                } else if (this.item) {
                    type = this.item.shop_type;
                };
                return type;
            }
        },
        active_name: {
            get () {
                let name = null
                if (this.name) {
                    name = this.name
                } else if (this.item) {
                    name = this.item.shop_name_text || this.item.shop_name;
                }
                return name
            }
        },

        store () {
            const list = [
                { name: 'PODpartner', img: require('@/assets/images/store/store-order-self.png') },
                { name: 'Shopify', img: require('@/assets/images/store/store-connect-shopify.png') },
                { name: 'Etsy', img: require('@/assets/images/store/store-connect-etsy.png') },
                { name: 'Wix', img: require('@/assets/images/store/store-connect-wix.png') },
                { name: 'WooCommerce', img: require('@/assets/images/store/store-connect-woo.png') },
                { name: 'Squarespace', img: require('@/assets/images/store/store-connect-squ.png') },
            ]
            return list[this.active_type] || list[0]

        },

    },
    methods: {},
    created () { }
}
</script>
<style lang="scss" scoped>
.store-icon-connect {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }
    strong {
        display: none;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
    }
    span {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;
    }
}
</style>
